<template>
	<view class="page" style="padding-bottom: 150rpx;">
		<topVue title="商品详情"></topVue>
		<view class="bannerVue">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="500">
				<swiper-item class="swiper-item" v-for="(item,index) in productDetail.sliderPicUrls" :key="index">
					<image :src="item" style="width: 100%; height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="box margin0 padding30">
			<view class="name">{{ productDetail.name }}</view>
			<view class="flex-between align-center margin20">
				<view class="flex align-center">
					<text class="newPrice">￥{{ productDetail.price/100 }}</text>
					<text class="oldPrice">￥{{ productDetail.marketPrice/100 }}</text>
				</view>
				<view class="flex align-center">
					<image src="../../static/green_g.png" style="width: 42rpx; height: 42rpx;"></image>
					<text class="point" style="padding-left: 10rpx; font-weight: 600;">{{ productDetail.price/100 }}绿色积分</text>
				</view>
			</view>
			<view class="flex align-center margin20">
				<view class="sold">已售{{ productDetail.salesCount }}</view>
			</view>
		</view>
		<!-- <view class="tipVue padding-row30 flex-column flex-center">
			<view class="w100 flex-between align-center">
				<view class="flex-between align-center">
					<image src="../../static/index/tip.png" style="width: 32rpx; height: 32rpx;"></image>
					<text style="line-height: 1; padding-left: 12rpx;">消费金额达到1000元以上可享受绿色积分补贴</text>
				</view>
				<image src="../../static/index/question.png" style="width: 32rpx; height: 32rpx;"></image>
			</view>
			<view style="line-height: 1; color: #4B5563; padding: 10rpx 0 0 44rpx;">当前累计金额<text style="color: #FF3B30; font-weight: 600;">500</text>/1000 </view>
		</view>
		<view class="tipVue flex-between align-center padding-row30">
			<view class="flex align-center">
				<image src="../../static/green_g.png" style="width: 28rpx; height: 28rpx;"></image>
				<text style="line-height: 1;">首次购买当前商品可得积分补贴</text>
			</view>
			<view class="point">60绿色积分</view>
		</view> -->
		
		<view class="content" style="padding: 0;">
			<image :src="item" v-for="(item, index) in description" :key="index" mode="widthFix" style="width: 100%;"></image>
		</view>
		
		<!-- 底部 -->
		<view class="botVue flex-between align-center">
			<view class="flex-column align-center flex-between" style="height: 72rpx;" @click="$tools.route('./help')">
				<image src="../../static/index/chat.png" style="width: 40rpx; height: 40rpx;"></image>
				<text>客服</text>
			</view>
			<view class="flex">
				<view class="btn_l" @click="isJoinCar=true">加入购物车</view>
				<view class="line"></view>
				<view class="btn_r" @click="toBuy">立即购买</view>
			</view>
		</view>
		
		
		<!-- 加入购物车 -->
		<u-popup v-model="isJoinCar" mode="bottom" :closeable="true">
			<view class="popVue">
				<view class="flex align-center">
					<view class="pictrue">
						<image :src="productDetail.picUrl" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="flex-column flex-1 flex-between" style="padding-left: 20rpx; height: 150rpx;">
						<view class="name">{{ productDetail.name }}</view>
						<view class="skustext" v-if="skusList.length===0">
							<text>请选择规格</text>
						</view>
						<view class="skustext flex" v-else>
							<text v-for="(ver, i) in skusList" :key="i">{{ver}}</text>
						</view>
						<view class="flex-between align-center">
							<text class="price">{{ skusId ? price/100 : productDetail.price/100 }}</text>
							<u-number-box v-model="quantity" @change="valChange" :min="1"></u-number-box>
						</view> 
					</view>
				</view>
				
				<!-- 选择规格 -->
				<view class="skusVue margin30">
					<scroll-view scroll-y="true" class="scrollVue">
						<view class="item flex-between align-center padding-row20" v-for="(item, index) in productDetail.skus" :class="{active: skusId===item.id}" :key="index" @click="skusSelect(item)">
							<text v-for="(o,i) in item.properties" :key="i" style="color: #454545; font-weight: 600; padding-right: 10rpx;">{{ o.valueName }}</text>
							<text style="font-weight: 600;" :style="{color: skusId===item.id ? '#1CC289' : '#454545'}">{{ item.price/100 }}</text>
						</view>
					</scroll-view>
				</view>
					
				<!-- 按钮 -->
				<view class="btn margin50" @click="joinShopCar()">加入购物车</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				current: 0,
				tabs: [{name: '商品详情'},{name: '规格参数'},{name: '用户评价'}],
				isJoinCar: false,
				productId: "",
				productDetail: {
					sliderPicUrls: [],
					skus: [],
					salesCount: 0,
					name: "",
					marketPrice: 0,
					price: 0
				},
				skusList: [],
				skusId: "",
				price: 0,
				quantity: 1,
				description: [],
			}
		},
		
		async onLoad(option) {
			this.productId = option.value
			await this.getDetail()
		},
		
		methods: {
			tabChange(e){
				this.current = e
			},
			
			valChange(e){
				console.log(e)
				this.quantity = e.value
			},
			
			toBuy(){
				uni.navigateTo({
					url: './productConfirm_3?obj=' + encodeURIComponent(JSON.stringify(this.productDetail))
				})
			},
			
			// 获取商品详情
			async getDetail(){
				const result = await this.$request("/app-api/product/spu/get-detail", "GET", { id: this.productId })
				if(result.code===0) {
					this.productDetail = result.data
					this.skusId = result.data.skus[0].id
					this.price = result.data.skus[0].price
					this.description = result.data.description.join(",")
					let array = result.data.skus[0].properties
					array.forEach(ver=> {
						// this.skusList.push(ver.propertyName + " " + ver.valueName) 
						this.skusList.push(ver.valueName) 
					})
					console.log("商品详情", this.productDetail)
				}
			},
			
			
			skusSelect(item){
				if(this.skusId===item.id) {
					this.skusId = ""
					this.skusList = []
					return 
				}
				this.skusId = item.id
				this.price = item.price
				this.skusList = []
				item.properties.forEach(ver=> {
					this.skusList.push(ver.propertyName + " " + ver.valueName) 
				})
			},
			
			// 加入购物车
			async joinShopCar(){
				if(!this.skusId) return this.$u.toast("请选择规格")
				const result = await this.$request("/app-api/trade/cart/add", "POST",{
					skuId: this.skusId,  //商品sku的id
					count: this.quantity,
					categoryId: 3, //商品一级分类id,也就是订单区,折扣区等类型的id
				})
				if(result.code===0) {
					this.$u.toast("加入购物车成功")
					this.isJoinCar = false
				}else {
					this.$u.toast(result.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 100%;
		height: 750rpx;
		.swiper {
			width: 750rpx;
			height: 750rpx;
			.swiper-item {
				width: 750rpx;
				height: 750rpx;
			}
		}
	}
	
	.content {
		width: 100%;
		padding: 30rpx;
		.descri {
			color: #6B7280;
			line-height: 38rpx;
		}
		.label {
			font-weight: 600;
			font-size: 30rpx;
		}
		.item {
			width: 335rpx;
			height: 120rpx;
			background: #F9FAFB;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
		.inner {
			width: 100%;
			height: 500rpx;
			background: #F9FAFB;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
		.li {
			width: 100%;
			padding: 30rpx;
			background: #F9FAFB;
			margin-top: 20rpx;
			border-radius: 20rpx;
			.name {
				font-weight: 600;
			}
			.text {
				color: #4B5563;
				line-height: 38rpx;
				padding: 15rpx 0;
			}
		}
	}
	
	.box {
		width: 100%;
		.name {
			font-weight: 600;
			color: #000;
		}
		.newPrice {
			color: #1CC289;
			font-weight: 600;
			line-height: 1;
		}
		.oldPrice {
			color: #6B7280;
			text-decoration: line-through;
			line-height: 1;
			padding-left: 20rpx;
		}
		.point, .sold, .rate {
			color: #1CC289;
			line-height: 1;
			padding-right: 20rpx;
		}
		.sold {
			color: #4B5563;
		}
	}
	
	.tipVue {
		width: 100%;
		height: 100rpx;
		background: #F0FDF4;
		text {
			color: #4B5563;
			padding-left: 15rpx;
			line-height: 1;
		}
		.point {
			color: #1CC289;
			line-height: 1;
			font-weight: 600;
		}
	}
	
	.botVue {
		width: 100%;
		height: 150rpx;
		background: #fff;
		position: fixed;
		padding: 0 30rpx 0 40rpx;
		left: 0;
		bottom: 0;
		background: #fff;
		text {
			color: #4B5563;
			font-size: 26rpx;
		}
		.line {
			width: 1rpx;
			height: 72rpx;
			background: rgba(0, 0, 0, .05);
		}
		.btn_l, .btn_r {
			width: 180rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: #fff;
		}
		.btn_l {
			background: linear-gradient(to right, #1CC289, #60A5FA);
			border-radius: 14rpx 0 0 14rpx;
		}
		.btn_r {
			border-radius: 0 14rpx 14rpx 0;
			background: linear-gradient(to right, #60A5FA, #1CC289);
		}
	}


	.popVue {
		width: 100%;
		position: relative;
		padding: 40rpx;
		.pictrue {
			width: 150rpx;
			height: 150rpx;
			border-radius: 15rpx;
			background: #f5f5f5;
		}
		.name {
			color: #333;
			font-weight: 600;
			line-height: 42rpx;
			padding-right: 30rpx;
		}
		.skustext {
			width: 100%;
			text {
				line-height: 1;
				color: #454545;
				padding-right: 20rpx;
			}
		}
		.price {
			color: #1CC289;
			font-weight: 600;
			font-size: 30rpx;
		}
		.addressVue {
			width: 100%;
			padding: 30rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			.addresscontent {
				color: #4B5563;
				line-height: 32rpx;
				padding-top: 20rpx;
			}
		}
		.skusVue {
			width: 100%;
			max-height: 400rpx;
			.scrollVue {
				width: 100%;
				max-height: 400rpx;
				.item {
					width: 100%;
					height: 72rpx;
					border-radius: 12rpx;
					text-align: center;
					line-height: 72rpx;
					border: #E5E7EB 1rpx solid;
					margin-bottom: 20rpx;
					
					text {
						line-height: 1;
						color: #454545;
					}
				}
				.active {
					border: #1CC289 1rpx solid;
				}
			}
		}
		.btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 40rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			color: #fff;
			text-align: center;
		}
	}
</style>